<script setup>
import PanelItem from './PanelItem.vue'
import goDetail from '@/utils/goDetail'
import router from '@/router'

defineProps({
  id: String,
  name: String,
  picture: String,
  saleInfo: String,
  children: Object,
  goods: Object
})
</script>

<template>
  <div class="panel">
    <div class="containter">
      <div class="head">
        <span style="font-size: 30px; margin-right: 500px">{{ name }}</span>
        <ul class="nav">
          <li
            class="nav-item"
            v-for="item in children"
            :key="item.id"
            @click="router.push(`/category/sub/${item.id}`)"
          >
            {{ item.name }}
          </li>
        </ul>
        <div class="more" @click="router.push(`/category/${id}`)">
          <span>查看全部</span>
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="body">
        <div class="img">
          <img v-lazyImg="picture" alt="" />
          <div class="info">
            <span class="info1">{{ name }}馆</span>
            <span class="info2">{{ saleInfo }}</span>
          </div>
        </div>
        <div class="list">
          <div class="item" v-for="item in goods" :key="item.id">
            <PanelItem
              :name="item.name"
              :desc="item.desc"
              :picture="item.picture"
              :price="item.price"
              @click="goDetail(item.id)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.panel {
  width: 100%;
  height: 725px;
  display: flex;
  justify-content: center;
  .containter {
    width: 1240px;
    height: 100%;
    .head {
      margin: 30px;
      display: flex;
      white-space: nowrap;
      justify-content: space-between;
      align-items: center;
      .nav {
        list-style: none;
        display: flex;
        margin-right: 50px;
        .nav-item {
          padding: 0px 13px;
          font-size: 15px;
          border-radius: 2px;
          cursor: pointer;
          &:hover {
            background-color: #27ba9b;
            color: #fff;
          }
        }
      }
      .more {
        display: flex;
        align-items: center;
        color: #aeaeae;
        cursor: pointer;
        &:hover {
          color: #27ba9b;
        }
      }
    }
    .body {
      height: 615px;
      width: 100%;
      display: flex;
      .img {
        height: 100%;
        position: relative;
        cursor: pointer;
        img {
          width: 240px;
          height: 100%;
          object-fit: cover;
        }
        .info {
          position: absolute;
          left: 0;
          top: 270px;
          font-size: 17px;
          color: #fff;
          display: flex;
          .info1 {
            padding: 20px 10px;
            background-color: #000000e6;
            opacity: 0.95;
          }
          .info2 {
            padding: 20px 10px;
            background-color: #000000b3;
            opacity: 0.85;
          }
        }
      }
      .list {
        display: flex;
        flex-wrap: wrap;
        .item {
          width: calc(25% - 10px);
          margin: 5px;
        }
      }
    }
  }
}
</style>
